<template>
	<button class="ui-btn" :style="style" @click="click" :class="[classname,size,disabledClass,type]" :type="nativetype">
		<slot></slot>
	</button>
</template>

<script>
	/*
	组件属性[
		style:自定义样式
		class:自定义class
		disabled：是否交互 true/false
		size:按钮尺寸 big,normal(默认),small,mini
		type:按钮样式 normal(背景有色彩)/border(边框有色彩)
		nativetype：原生type属性 button默认/submit/reset
	]
	组件事件[
		click:选项发生改变时回调的父组件方法，callback(obj[当前实例])
	]
	*/
	export default{
		props:{
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'size':{type:String,default:'normal'},
			'disabled':{type:Boolean,default:false},
			'type':{type:String,default:'normal'},
			'nativetype':{type:String,default:'button'}
		},
		data(){
			return {
				uiType:"ui-btn",
				disabledClass:this.disabled?"disabled":""
			}
		},
		methods:{			
			click(){
				if(!this.disabled)this.$emit('click');
			}
		}
	}
</script>

